<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { RouteMap, useRouter } from '@/router';
import { useUserStore } from '@/store/user';
import { channelFxInfo, staffFxInfo } from '@/api/user';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const statusBarH = ref(0);
const router = useRouter();
const userStore = useUserStore();
const info = ref<any>({
  brokerage: 0,
  allBrokerage: 0,
  settlingBrokerage: 0,
  settlingWithdraw: 0,
  withdraw: 0,
  BrokerageList: []
});

async function getInfo() {
  if (userStore.user.rebateMode == 'STAFF') {
    var res = await staffFxInfo(userStore.user.staffId);
  } else {
    var res = await channelFxInfo(userStore.user.channelId);
  }
  if (res.code == 0) {
    info.value = res.data;
  }
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });

  getInfo();
});
</script>

<template>
  <view
    :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }"
    class="distribution-contain"
  >
    <view class="distribution-contain-bg"></view>
    <view class="distribution-contain-view">
      <uni-nav-bar
        v-if="isWechat()"
        :border="false"
        :title="t('LDKey_distributionCenter')"
        backgroundColor="none"
        fixed
        left-icon="left"
        status-bar
        @click-left="router.back"
      />
      <view class="distribution-contain-view-contain">
        <view class="distribution-contain-view-contain-top">
          <view class="distribution-contain-view-contain-top-v">
            <image
              :src="userStore.user.avatar"
              class="distribution-contain-view-contain-top-v-img"
            />
            <text>{{ userStore.user.fullName }}</text>
            <view
              v-if="userStore.user.staffId > 0"
              class="distribution-contain-view-contain-top-v-staff"
            >
              {{ t('LUKey_staff') }}
              <image src="/static/icon_my_staff.png" />
            </view>
            <view
              v-if="userStore.user.channelId > 0"
              class="distribution-contain-view-contain-top-v-channel"
            >
              {{ t('LUKey_channel') }}
              <image src="/static/icon_my_channel.png" />
            </view>
          </view>
          <image
            class="distribution-contain-view-contain-top-img"
            src="/static/distribution/img1.png"
          />
        </view>

        <view class="distribution-contain-view-contain-withdraw">
          <view class="distribution-contain-view-contain-withdraw-l">
            <view>{{ t('LDKey_distributionCommission') }}</view>
            <view>
              {{ info.brokerage }}
              <text>JPY</text>
            </view>
          </view>
          <view class="distribution-contain-view-contain-withdraw-r">
            <image
              class="distribution-contain-view-contain-withdraw-r-bg"
              src="/static/distribution/img2.png"
            />
            <view @click="router.to(RouteMap.withdrawList)">
              {{ t('LDKey_distributionDetail') }}
              <image src="/static/distribution/img3.png" />
            </view>
          </view>
        </view>

        <view class="distribution-contain-view-contain-stat">
          <view class="distribution-contain-view-contain-stat-cont">
            <view class="distribution-contain-view-contain-stat-cont-item">
              <view>
                {{ t('LDKey_distributionTotalCommission') }}
              </view>
              <view>
                {{ info.allBrokerage }}
                <text>JPY</text>
              </view>
            </view>
            <view class="distribution-contain-view-contain-stat-cont-item">
              <view>
                {{ t('LDKey_distributionSettlementCommission') }}
                <!--              <image src="/static/distribution/img4.png"/>-->
              </view>
              <view>
                {{ info.settlingBrokerage }}
                <text>JPY</text>
              </view>
            </view>
            <view class="distribution-contain-view-contain-stat-cont-item">
              <view>
                {{ t('LDKey_distributionWithdrawing') }}
              </view>
              <view>
                {{ info.settlingWithdraw }}
                <text>JPY</text>
              </view>
            </view>
            <view class="distribution-contain-view-contain-stat-cont-item">
              <view>
                {{ t('LDKey_distributionWithdrawn') }}
              </view>
              <view>
                {{ info.withdraw }}
                <text>JPY</text>
              </view>
            </view>
          </view>
          <view
            class="distribution-contain-view-contain-stat-btn"
            @click="router.to(RouteMap.withdraw)"
          >
            {{ t('LDKey_distributionWithdrawNow') }}
          </view>
        </view>

        <view class="distribution-contain-view-contain-btn">
          <view
            class="distribution-contain-view-contain-btn-item"
            @click="router.to(RouteMap.userShare)"
          >
            <image
              class="distribution-contain-view-contain-btn-item-bg"
              src="/static/distribution/img6.png"
            />
            <view class="distribution-contain-view-contain-btn-item-v">
              <view class="distribution-contain-view-contain-btn-item-v-t distribution-btn1">
                <view>{{ t('LDKey_distributionShare') }}</view>
                <view>{{ t('LDKey_distributionShareCommission') }}</view>
              </view>
              <image src="/static/distribution/img8.png" />
            </view>
          </view>
          <view
            class="distribution-contain-view-contain-btn-item"
            @click="router.to(RouteMap.invite)"
          >
            <image
              class="distribution-contain-view-contain-btn-item-bg"
              src="/static/distribution/img5.png"
            />
            <view class="distribution-contain-view-contain-btn-item-v">
              <view class="distribution-contain-view-contain-btn-item-v-t distribution-btn2">
                <view>{{ t('LDKey_distributionFriend') }}</view>
                <view>{{ t('LDKey_distributionFriendView') }}</view>
              </view>
              <image src="/static/distribution/img7.png" />
            </view>
          </view>
        </view>

        <view class="distribution-contain-view-contain-order">
          <view class="distribution-contain-view-contain-order-t">
            <view>{{ t('LDKey_distributionCommissionOrder') }}</view>
            <view @click="router.to(RouteMap.distributionOrder)">
              {{ t('LDKey_distributionCommissionOrderViewAll') }}
              <image src="/static/distribution/img3.png" />
            </view>
          </view>
          <view
            v-if="info.BrokerageList && info.BrokerageList.length > 0"
            class="distribution-contain-view-contain-order-list"
          >
            <view
              v-for="(item, index) in info.BrokerageList"
              :key="index"
              class="distribution-contain-view-contain-order-list-item"
              @click="router.to(RouteMap.distributionOrderDetail, { id: item.id })"
            >
              <view class="distribution-contain-view-contain-order-list-item-t">
                <view class="distribution-contain-view-contain-order-list-item-t-l">
                  <image src="/static/distribution/img9.png" />
                  {{ t('LDKey_distributionCommissionOrderNo') }}{{ item.orderSn }}
                </view>
                <view class="distribution-contain-view-contain-order-list-item-t-r">
                  +{{ item.rebateAmount ? item.rebateAmount : 0 }}
                </view>
              </view>
              <view class="distribution-contain-view-contain-order-list-item-b">
                <view>{{ item.createdAt }}</view>
                <view>
                  {{
                    item.rebateStatus == 'WAIT'
                      ? t('LDKey_distributionCommissionOrderSettlement')
                      : ''
                  }}
                </view>
              </view>
            </view>
          </view>
          <view v-else class="distribution-contain-view-contain-order-list-empty">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_points_empty.png"
            />
            <view>{{ t('LAKey_pointEmpty') }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.distribution {
  &-contain {
    &-bg {
      width: 100%;
      height: 594rpx;
      background: linear-gradient(270deg, #99f2ff 0%, #c8e6ff 74%);
    }

    &-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &-contain {
        position: relative;

        &-top {
          position: relative;
          padding: 44rpx 50rpx 62rpx;

          &-v {
            display: flex;
            align-items: center;

            &-img {
              width: 72rpx;
              height: 72rpx;
              border-radius: 100%;
              display: block;
            }

            text {
              font-weight: 500;
              font-size: 36rpx;
              color: #3d3d3d;
              line-height: 50rpx;
              margin-left: 20rpx;
            }

            &-staff {
              margin-left: 24rpx;
              position: relative;
              padding-right: 8rpx;
              height: 30rpx;
              border-radius: 30rpx;
              background: linear-gradient(270deg, #ff9c5f 0%, #ffd629 99%);
              padding-left: 20rpx;
              font-weight: 500;
              font-size: 20rpx;
              color: #ffffff;
              line-height: 30rpx;

              image {
                display: block;
                position: absolute;
                width: 40rpx;
                height: 40rpx;
                left: -24rpx;
                top: -8rpx;
              }
            }

            &-channel {
              margin-left: 24rpx;
              position: relative;
              padding-right: 8rpx;
              height: 30rpx;
              border-radius: 30rpx;
              background: linear-gradient(270deg, #0348bf 0%, #2977ff 99%);
              padding-left: 20rpx;
              font-weight: 500;
              font-size: 20rpx;
              color: #ffffff;
              line-height: 30rpx;

              image {
                display: block;
                position: absolute;
                width: 40rpx;
                height: 40rpx;
                left: -24rpx;
                top: -8rpx;
              }
            }
          }

          &-img {
            display: block;
            width: 194rpx;
            height: 178rpx;
            position: absolute;
            top: 0;
            right: 50rpx;
          }
        }

        &-withdraw {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #f8f7fd;
          margin: 0 42rpx;
          border-top-left-radius: 20rpx;
          border-top-right-radius: 20rpx;
          padding-left: 32rpx;

          &-l {
            view {
              &:first-child {
                font-weight: 400;
                font-size: 24rpx;
                color: #979797;
                line-height: 34rpx;
                margin-bottom: 8rpx;
              }

              &:last-child {
                font-weight: 700;
                font-size: 48rpx;
                color: #d13820;
                line-height: 52rpx;

                text {
                  font-size: 24rpx;
                }
              }
            }
          }

          &-r {
            position: relative;

            &-bg {
              display: block;
              width: 324rpx;
              height: 160rpx;
            }

            view {
              position: absolute;
              top: 32rpx;
              right: 8rpx;
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 24rpx;
              color: #979797;
              line-height: 34rpx;

              image {
                display: block;
                width: 32rpx;
                height: 32rpx;
              }
            }
          }
        }

        &-stat {
          margin: 0 24rpx;
          background: #ffffff;
          box-shadow: 0rpx -14rpx 16rpx -8rpx rgba(73, 179, 200, 0.2);
          padding: 32rpx 48rpx;
          border-bottom-left-radius: 20rpx;
          border-bottom-right-radius: 20rpx;

          &-cont {
            display: grid;
            grid-template-columns: 1fr 1fr;
            row-gap: 40rpx;

            &-item {
              view {
                &:first-child {
                  display: flex;
                  align-items: center;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #979797;
                  line-height: 34rpx;
                  margin-bottom: 8rpx;

                  image {
                    display: block;
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 4rpx;
                  }
                }

                &:last-child {
                  font-weight: 700;
                  font-size: 36rpx;
                  color: #3d3d3d;
                  line-height: 40rpx;

                  text {
                    font-size: 20rpx;
                  }
                }
              }
            }
          }

          &-btn {
            width: 100%;
            height: 84rpx;
            line-height: 84rpx;
            border-radius: 84rpx;
            background: linear-gradient(90deg, #e7a446 0%, #ffd38b 100%);
            box-shadow: inset 0rpx 0rpx 42rpx 0rpx rgba(255, 255, 255, 0.62);
            text-align: center;
            font-weight: 500;
            font-size: 28rpx;
            color: #63431c;
            margin-top: 40rpx;
          }
        }

        &-btn {
          display: flex;
          padding: 20rpx 24rpx;
          justify-content: space-between;

          &-item {
            width: 340rpx;
            height: 160rpx;
            background: #ffffff;
            border-radius: 20rpx;
            position: relative;

            &-bg {
              display: block;
              width: 100%;
              height: 104rpx;
            }

            &-v {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-left: 32rpx;
              padding-right: 16rpx;

              &-t {
                view {
                  &:first-child {
                    font-weight: 500;
                    font-size: 28rpx;
                    line-height: 40rpx;
                  }

                  &:last-child {
                    font-weight: 400;
                    font-size: 24rpx;
                    line-height: 34rpx;
                    margin-top: 8rpx;
                  }
                }

                &.distribution-btn1 {
                  view {
                    &:first-child {
                      color: #2c175d;
                    }

                    &:last-child {
                      color: #68529b;
                    }
                  }
                }

                &.distribution-btn2 {
                  view {
                    &:first-child {
                      color: #572700;
                    }

                    &:last-child {
                      color: #ac642b;
                    }
                  }
                }
              }

              image {
                display: block;
                width: 146rpx;
                height: 160rpx;
              }
            }
          }
        }

        &-order {
          margin: 0 24rpx;
          background: #ffffff;
          border-radius: 20rpx;
          padding: 32rpx 0;

          &-t {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16rpx 0 24rpx;
            margin-bottom: 16rpx;

            view {
              &:first-child {
                font-weight: 600;
                font-size: 36rpx;
                color: #3d3d3d;
                line-height: 50rpx;
              }

              &:last-child {
                display: flex;
                align-items: center;
                font-weight: 400;
                font-size: 24rpx;
                color: #979797;
                line-height: 34rpx;

                image {
                  display: block;
                  width: 32rpx;
                  height: 32rpx;
                }
              }
            }
          }

          &-list {
            padding-left: 24rpx;

            &-item {
              border-bottom: 1px solid #f5f5f5;
              padding: 36rpx 32rpx 26rpx 0;

              &:last-child {
                border-bottom: none;
              }

              &-t {
                display: flex;
                justify-content: space-between;
                align-items: center;

                &-l {
                  display: flex;
                  align-items: center;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #3d3d3d;
                  line-height: 40rpx;

                  image {
                    display: block;
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 8rpx;
                  }
                }

                &-r {
                  font-weight: 400;
                  font-size: 32rpx;
                  color: #3d3d3d;
                  line-height: 38rpx;
                }
              }

              &-b {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 56rpx;

                view {
                  &:first-child {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #979797;
                    line-height: 34rpx;
                  }

                  &:last-child {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #269c74;
                    line-height: 34rpx;
                  }
                }
              }
            }

            &-empty {
              margin-top: 52rpx;
              position: relative;

              image {
                display: block;
                width: 556rpx;
                height: 556rpx;
                margin: 0 auto;
              }

              view {
                text-align: center;
                font-size: 28rpx;
                color: #afafaf;
                line-height: 44rpx;
                font-weight: 400;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 50rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
